<template>
  <view class="reservation-detail" v-cloak>
    <view class="detail-card">
      <view class="card-header">
        <uni-icons type="checkbox-filled" size="28" color="#fff"></uni-icons>
        预约成功
      </view>
      <view class="card-item">
        <view class="item-label">预约诊所</view> {{selectStore.name}}
      </view>
      <view class="card-item">
        <view class="item-label">预约项目</view> {{info.appointmentProject || '-'}}
      </view>
      <view class="card-item">
        <view class="item-label">预约医师</view> {{info.appointmentDoctor || '到店分配'}}
      </view>
      <view class="card-item">
        <view class="item-label">预约时间</view> {{info.appointmentStartTime}} - {{info.appointmentEndTime}}
      </view>
    </view>
    <view class="detail-card">
      <view class="card-item">
        <view class="item-label">预约人</view> {{info.patientName}}
      </view>
      <view class="card-item">
        <view class="item-label">联系方式</view> {{info.appointmentPhone || '-'}}
      </view>
      <view class="card-item">
        <view class="item-label">备注</view> {{info.notes || '-'}}
      </view>
    </view>
    <view class="detail-card" style="padding: 24rpx;margin-top: 20rpx;">
      <view class="card-title">预约须知</view>
      <view class="card-p">· 可随时更改或取消预约</view>
      <view class="card-p">· 若超期未到店，需重新预约</view>
    </view>
    
    <view class="detail-footer">
      <view class="button" @click="handleCancel()">取消预约</view>
      <view class="button var-button" @click="handleChangeInvitation()">修改预约</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id:'',
        info:{},
        selectStore:uni.getStorageSync('selectStore')
      };
    },
    onLoad(ops) {
      this.id = ops.id
      uni.showLoading({
        title:'加载中...'
      })
      this.$get('/yahe/appointment/getInfo',{
        id:ops.id
      },'1').then(res=>{
        if(res.code == '1') this.info = res.content
      })
    },
    methods:{
      handleCancel(){
        uni.showModal({
          title:'是否取消预约?',
          success:res=>{
            if(res.confirm){
              uni.showLoading({
                title:'加载中...'
              })
              this.$put(`/yahe/appointment/cancel/${this.id}`,'','1').then(res=>{
                if(res.code == '1'){
                  this.$toast('取消成功')
                  setTimeout(()=>{
                    uni.navigateBack()
                  },1000)
                }else{
                  this.$toast(res.message)
                }
              })
            }
          }
        })
      },
      handleChangeInvitation(){
        uni.navigateTo({
          url:`/pages/family-doctor/invitation-submit?invitationId=${this.id}`
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.reservation-detail{
  min-height: 100vh;
  background: var(--page-bg);
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  .detail-card{
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    .card-header{
      line-height: 100rpx;
      background: linear-gradient( 90deg, #10BEAF 0%, #29D8C6 100%);
      color: #fff;
      font-size: 34rpx;
      font-weight: bold;
      padding: 0 32rpx;
      ::v-deep.uni-icons{
        margin-right: 16rpx;
        font-weight: 400;
        vertical-align: sub;
      }
    }
    .card-item{
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: var(--title-color);
      padding: 24rpx;
      .item-label{
        color: var(--sub-title);
        width: 120rpx;
        margin-right: 20rpx;
      }
    }
    .card-title{
      font-size: 28rpx;
      color: var(--title-color);
    }
    .card-p{
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #6D6D6D;
    }
  }  // detail-card end
  
  .detail-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 4rpx;
    background: #fff;
    font-size: 28rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .button{
      flex: 1;
      border-radius: 80rpx;
      line-height: 80rpx;
      font-size: 30rpx;
      color: var(--theme-color);
      margin: 0 20rpx;
      text-align: center;
      border: 2rpx solid var(--theme-color);
    }
    .var-button{
      color: #fff;
    }
  }
}
</style>
